<template>
    <div id="record">
        <HeaderBg>
            <Headers :title="$t('record.title')" />
        </HeaderBg>
        <div class="tab-container">
            <ul>
                <li v-for="(item,index) in tabList" :key="index" @click="clickTab(index)">
                    <div :class="{active:tabActive == index}">{{item}}</div>
                </li>
            </ul>
            <!-- 列表展示内容 -->
            <div class="list-container"></div>
        </div>
    </div>
</template>

<script>
import HeaderBg from 'components/HeaderBg'
    export default {
        name:'record',
        data() {
            return {
                tabList:[this.$t('record.tabTotal'), this.$t('record.tabPaySucc'), this.$t('record.tabSKSucc')],
                tabActive:0
            }
        },
        methods:{
            clickTab(index) {
                this.tabActive = index;
                switch (index) {
                    case 0:
                        alert('请求全部数据');
                        break;
                    case 1:
                        alert('请求付款数据');
                        break;
                    default:
                        alert('请求收款数据');
                        break;
                }
            }
        },
        components:{
            HeaderBg
        }
    }
</script>

<style lang="stylus" scoped>
@import '../../utils/styl/mixin.styl';
#record
    positCenter(0,0,0,0,0,0)
    width 100%
    background-color $bodyBg
    .tab-container
        margin-top rem(150)
        ul
            display flex
            justify-content space-around
            border-bottom  rem(1) solid $tabBarColor
            line-height rem(40)
            li
                flex 1
                color $fontColor
                font-size rem(15)
                height 100%
                div
                    width 70%
                    margin 0 auto
                .active
                    border-bottom rem(3) solid $tabBarActive
</style>
